<!-- Created by mhy on 2018/6/27.

 -->
<style scoped lang="scss">
    .frame-index{
        position: relative;
        width: 100%; overflow: hidden;
        background:#F2F2F2;
    }
    .u-wrap{
        position: relative;
        display: flex;
        margin: 70px auto 0 auto;
    }

    .u-detail{
        position: relative;
        flex: 1;
        background: #fff;
    }

    .u-vip-box{
        position: relative;
        width: 30%;
    }

    .u-header{
        height: 94px;
        position: relative;
        border-bottom: 2px solid rgba(151, 151, 151, 1);
    }

    .u-name{
        position: absolute;
        left: 50px; top: 36px;
        height:40px;
        font-size:28px;
        color:rgba(48,54,65,1);
        line-height:40px;
    }

    .u-btn{
        position: absolute;
        width:80px;
        height:37px;
        top: 33px; right: 50px;
        background:rgba(255,82,62,1);
        border-radius:5px;
        color: #fff;
        font-size:12px;
        text-align: center;
        line-height: 37px;
    }

    .u-body{
        position: relative;
        width: 100%;
        box-sizing: border-box;
        padding: 0 50px;
        min-width: 750px;
        overflow: hidden;
        padding-bottom: 356px;
    }

    .u-block{
        position: relative;
        height: 106px;
        border-bottom: 1px solid #E5E5E5;
    }

    .u-regist{
        position: absolute;
        left: 0; top: 50px;
        height: 37px; line-height: 37px;
        color: #303641;
        font-size: 26px;
    }

    .u-red{
        color: #FF523E;
    }

    button{
        cursor: pointer;
    }

    .u-item-block{
        position: relative;
        height: 129px;
        font-size: 16px;
        border-bottom: 1px solid #E5E5E5;
    }

    .u-item-label{
        position: absolute;
        left: 0; top: 30px;
    }

    .u-item-text{
        position: absolute;
        right: 0; top: 30px;
    }

    .u-vip-update{
        position: absolute;
        left: 0; top: 82px;
        color: #F5A623;
    }

    .u-pass-btn{
        position: absolute;
        line-height: 30px; text-align: center;
        width:60px;
        height:30px;
        background:rgba(2,187,0,1);
        border-radius:5px;
        color: #fff;
        bottom: 23px; right: 70px;
    }

    .u-refuse-btn{
       @extend .u-pass-btn;
       background: #F5A623; right: 0;
    }

    .u-btn-black{
        @extend .u-btn;
        color: #fff;
        background: #000;
    }

    .c-title{
        position: relative;
        height: 80px;
        background:rgba(242,242,242,1);
    }

    .u-vip-wrap{
        position: relative;
        width: 88.57142857142857%;
        margin: 0 auto;
    }

    .u-vip-title{
        height: 94px;
        line-height: 94px;
        text-align: center;
        border-bottom: 2px solid rgba(151,151,151,1);
        color:rgba(48,54,65,1);
        font-size:20px;
        margin-bottom: 28px;
    }

    .u-vip-item{
        position: relative;
        height:109px;
        box-shadow:0px 1px 2px 0px rgba(0,0,0,0.04);
        border-radius:3px;
        margin-bottom: 13px;
        background: #fff;
    }

    .u-vip-logo{
        position: absolute;
        width: 37px; height: 37px;
        left: 13px; top: 18px;
    }

    .u-vip-dec{
        position: absolute;
        left: 62px; top: 18px;
        color:rgba(85,85,85,1);
        font-size:12px; line-height: 1;
    }

    .u-vip-type{
        position: absolute;
        left: 62px; top: 33px;
        color:rgba(17,17,17,1);
        height:30px; line-height: 30px;
        font-size:22px;
    }

    .u-vip-price{
        position: absolute;
        left: 62px; bottom: 7px;
        color:rgba(136,136,136,1);
        font-size:12px; line-height: 1;
    }

    .u-vip-date{
        position: absolute;
        right: 14px; bottom: 7px;
        color:rgba(136,136,136,1);
        font-size:12px; line-height: 1;
    }

    .u-detail-center{
        width: 71%; margin: 0 auto;
        flex: none;
        min-width: 850px;
    }

     .u-block{
        position: relative;
        height: 106px;
        border-bottom: 1px solid #E5E5E5;
    }

    .u-regist{
        position: absolute;
        left: 0; top: 50px;
        height: 37px; line-height: 37px;
        color: #303641;
        font-size: 26px;
    }

    .pop-content{
        position: relative;
        width: 100%;
        background: #fff;
        overflow: hidden;
    }

    .pop-title{
        position: relative;
        height: 80px;
        line-height: 80px;
        font-size:28px;
        color: #303641;
        text-align: center;
        background:rgba(242,242,242,1);
    }

    .pop-close{
        float: right;
        margin-right: 15px;
        cursor: pointer;
    }

    .pop-checklist{
        padding-left: 30px; width: 100%;
        box-sizing: border-box;
    }

    .pop-item{
        text-align: left;
        height: 50px;line-height: 50px;
        font-size: 14px;
    }

    .m-mt-30{
        margin-top: 30px;
    }

    .bg-ccc{
        width: 120%; height: 30px;
        background: #f2f2f2;
        margin-left: -30px;
    }

    .bg-block-ccc{
        position: relative;
        width: 100%; height: 135px;
        background: #f2f2f2;
    }

    .submit-btn{
       position: absolute;
       width: 670px; height: 50px;
       left: 50%; top: 50%;
       transform: translate(-50%, -50%);
       font-size: 16px;
    }

</style>

<style lang="scss">
    .yd-mask{
        width: 100%; height: 100%;
    }

   .pop-checklist .yd-checklist-icon{
       width:30px;
       height:30px;
       i{
           font-size: 20px; font-weight: 900;
       }
    }
</style>


<template>
    <div class="frame-index">
        <el-dialog
            v-loading="loading"
            title="提示"
            top="15%"
            append-to-body
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
            <el-input
                placeholder="请输入内容"
                v-model="content"
                clearable>
            </el-input>

            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateData">确 定</el-button>
            </span>
        </el-dialog>

        <yd-popup v-model="show" position="center" width="750px">
            <div class="pop-content">
                <div class="pop-title">管理权限 <yd-icon name="error" color="#FF523E" class="pop-close" @click.native='show = false'></yd-icon></div>
                <yd-checklist v-model="auth" class="pop-checklist">
                    <yd-checklist-item val="frame" style="width: 100%;">
                        <div class="pop-item">框条库</div>
                    </yd-checklist-item>
                    <yd-checklist-item val="matcard">
                        <div class="pop-item">卡纸库</div>
                    </yd-checklist-item>
                    <yd-checklist-item val="background">
                        <div class="pop-item">背景库</div>
                    </yd-checklist-item>
                    <yd-checklist-item val="sence">
                        <div class="pop-item">场景库</div>
                    </yd-checklist-item>

                    <div class="bg-ccc"></div>
                    <yd-checklist-item val="user">
                        <div class="pop-item">用户管理</div>
                    </yd-checklist-item>
                    <yd-checklist-item val="shop">
                        <div class="pop-item">商户管理</div>
                    </yd-checklist-item>
                    <yd-checklist-item val="factory">
                        <div class="pop-item">厂家管理</div>
                    </yd-checklist-item>
                    <div class="bg-ccc"></div>
                  <yd-checklist-item val="viptime">
                    <div class="pop-item">VIP时间管理</div>
                  </yd-checklist-item>
                    <yd-checklist-item val="price">
                        <div class="pop-item">VIP价格管理</div>
                    </yd-checklist-item>
                </yd-checklist>
                <div class="bg-block-ccc">
                    <yd-button type="primary" class="submit-btn" @click.native="changeDuty">完成</yd-button>
                </div>
            </div>
        </yd-popup>

        <div class="u-wrap">
            <div class="u-detail u-detail-center">
                <div class="u-header">
                    <div class="u-name">{{userData.username}}</div>
                    <button class="u-btn" @click="addBlackList" v-if="userData.state == 'enable'">禁用</button>
                    <button class="u-btn-black" @click="removeBlackList" v-else>启用</button>
                </div>

                <div class="u-body">
                    <UheadItem :imgurl="userData.usericon"/>
                    <Uitem label="状态" text="正常" v-if="userData.state == 'enable'"/>
                    <Uitem label="状态" text="禁用" v-else orange/>

                    <Uitem label="备注" :text="userData.comment">
                        <button slot="label" @click="update('comment')">修改</button>
                    </Uitem>
                    <Uitem label="装裱大师ID" :text="userData.userid"/>

                    <Uitem label="职能" :text="userData.duty">
                        <button slot="label" @click="update('duty')">修改</button>
                    </Uitem>

                    <Uitem label="管理权限" :text="authStr">
                        <button slot="label" @click="show = true">修改</button>
                    </Uitem>

                    <Uitem label="管理操作日志记录" text="10条" green/>
                    <Uitem label="最近登录：" :text="userData.createtime | registTime"/>
                    <Uitem label="绑定手机：" :text="userData.userphone"/>
                    <div class="u-block"><div class="u-regist">注册信息</div></div>
                    <Uitem label="注册方式" text="微信"/>
                    <Uitem label="微信昵称" :text="userData.username"/>
                    <Uitem label="注册日期" :text="userData.createtime | registTime"/>
                    <Uitem label="注册设备" :text="userData.deviceid"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapActions,mapState} from 'vuex'
    import UheadItem from '../../components/user/u-head-item.vue'
    import Uitem from '../../components/user/u-item.vue'
    export default {
        data () {
            return {
                vipRecord: false,
                centerDialogVisible: false,
                content: '',
                dataInfo: {},
                type: '',
                loading: false,
                show: false,
                auth: [],
                authObj: {
                    frame: '框条库',
                    matcard: '卡纸库',
                    background: '背景库',
                    sence: '场景库',
                    user: '用户管理',
                    shop: '商户管理',
                    factory: '厂家管理',
                    viptime: 'VIP时间管理',
                    price: 'VIP价格管理'
                },
                states: ''
            }
        },
        computed: {
            ...mapState({
                userData: state => state.plate.userData
            }),
            authStr () {
                if (this.userData.auth) {
                    return this.userData.auth.split('#').map(val => {
                        return this.authObj[val]
                    }).join('#')
                }
            }

        },
        components: {
            UheadItem,
            Uitem
        },
        mounted () {
          this.$store.state.navTitle = '平台管理员管理'
            this.getPlateDetail(this.$route.query.id)
            .then(d => {
                this.auth = d.result.auth.split('#')
            })
        },
        methods: {
            ...mapActions([
                'getPlateDetail',
                'changeSubMangerInfo',
                'updateSubManagerState'
            ]),
            changeDuty () {
                this.$dialog.loading.open('很快加载好了')
                this.updateSubManger({
                    userid: this.userData.userid,
                    states: this.userData.state,
                    auth: this.auth.join('#'),
                    duty: this.userData.duty,
                    comment: this.userData.comment
                })
            },
            updateSubManger (options) {
                this.$dialog.loading.open('很快加载好了')
                this.changeSubMangerInfo(options)
                .then(data => {
                    this.centerDialogVisible = false
                    this.show = false
                    this.$dialog.toast({
                        mes: '修改成功',
                        timeout: 2000,
                        icon: 'success'
                    })
                    this.getPlateDetail(this.$route.query.id)
                })
                .catch(err => {
                    this.$dialog.toast({
                        mes: err,
                        timeout: 2000,
                        icon: 'error'
                    })
                })
                .finally(() => {
                    this.$dialog.loading.close()
                })
            },
            addBlackList () {
                this.$xalert.open({
                    title: `确定要禁用${this.userData.username}管理员吗？`,
                    btnColor: 'rgba(255,82,62,1)',
                    btnText: '禁用',
                    success: () => {
                        this.states = 'black'
                        this.upSubManagerState()
                    }
                })
            },
            removeBlackList () {
                this.$xalert.open({
                    title: `确定要启用${this.userData.username}管理员吗？`,
                    btnColor: '#000',
                    btnText: '启用',
                    success: () => {
                        this.states = 'enable'
                        this.upSubManagerState()
                    }
                })
            },
            upSubManagerState () {
                this.$dialog.loading.open('很快加载好了')
                this.updateSubManagerState({
                    userid: this.userData.userid,
                    states: this.states,
//                    subid: this.userData.userid
                })
                .then(d => {
                    this.$dialog.toast({
                        mes: '修改成功',
                        timeout: 2000,
                        icon: 'success',
                        callback: () => {
                            this.$xalert.close()
                        }
                    })
                    this.getPlateDetail(this.$route.query.id)
                    .then(d => {
                        this.auth = d.result.auth.split('#')
                    })
                })
                .catch(err => {
                    this.$dialog.toast({
                        mes: err,
                        timeout: 2000,
                        icon: 'error'
                    })
                })
                .finally(() => {
                    this.$dialog.loading.close()
                })
            },
            update (type) {
                this.content = ''
                this.centerDialogVisible = true
                this.type = type
            },
            updateData (type) {
                var obj = {}
                if (this.type === 'duty') {
                    obj = {
                        userid: this.userData.userid,
                        states: this.userData.state,
                        auth: this.userData.auth,
                        duty: this.content,
                        comment: this.userData.comment
                    }
                } else if (this.type === 'comment') {
                    obj = {
                        userid: this.userData.userid,
                        states: this.userData.state,
                        auth: this.userData.auth,
                        duty: this.userData.duty,
                        comment: this.content
                    }
                }
                this.updateSubManger(obj)
            }
        },
        filters: {
            registTime (v) {
                if (v) {
                    return v.substring(0, 4) + '-' + v.substring(4, 6) + '-' + v.substring(6, 8) + ' ' + v.substring(8, 10) + ':' + v.substring(10, 12) + ':' + v.substring(12, 14)
                }
            },
            states (v) {
                if (v === 'enable') {
                    return '正常'
                } else {
                   return '禁用'
                }
            }
        }
    }
</script>
